<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			margin: 50px auto;
			width: 720px;
			/*			height: 500px;*/
			/*			background: blue;*/
		}

		h1 {
			text-align: center;
			margin-bottom: 20px;
		}

		.main {
			width: 720px;
			height: 367.34px;
			margin-bottom: 10px;
		}

		span {
			width: 80px;
			height: 64px;
			text-align: center;
			line-height: 64px;
			margin-right: 10px;
		}

		img {
			width: 64px;
			height: 64px;
			margin-right: 10px;
		}

		.bottom {
			height: 64px;
			display: flex;
			position: relative;
		}

		.oneTop {
			width: 300px;
			height: 300px;
			position: absolute;
			top: -310px;
			left: -20px;
			display: none;
			border: 1px solid yellow;
			background: #191E25;
		}

		.oneBottom {
			width: 0;
			height: 0;
			border: 20px solid;
			border-color: #191E25 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
			position: absolute;
			top: -10px;
			left: 98px;
			display: none;
		}

		.twoTop {
			width: 300px;
			height: 300px;
			position: absolute;
			top: -310px;
			left: 52px;
			background: #191E25;
			display: none;
			border: 1px solid yellow;
		}

		.twoBottom {
			width: 0;
			height: 0;
			border: 20px solid;
			border-color: #191E25 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
			position: absolute;
			top: -10px;
			left: 174px;
			display: none;
		}

		.threeTop {
			width: 300px;
			height: 300px;
			position: absolute;
			background: #191E25;
			top: -310px;
			left: 120px;
			display: none;
			border: 1px solid yellow;

		}

		.threeBottom {
			width: 0;
			height: 0;
			border: 20px solid;
			border-color: #191E25 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
			position: absolute;
			top: -10px;
			left: 248px;
			display: none;

		}

		.fourTop {
			width: 300px;
			height: 300px;
			position: absolute;
			background: #191E25;
			top: -310px;
			left: 195px;
			display: none;
			border: 1px solid yellow;
		}

		.fourBottom {
			width: 0;
			height: 0;
			border: 20px solid;
			border-color: #191E25 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
			position: absolute;
			top: -10px;
			left: 324px;
			display: none;
		}

		.fiveTop {
			width: 300px;
			height: 300px;
			position: absolute;
			background: #191E25;
			top: -310px;
			left: 270px;
			display: none;
			border: 1px solid yellow;
		}

		.fiveBottom {
			width: 0;
			height: 0;
			border: 20px solid;
			border-color: #191E25 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
			position: absolute;
			top: -10px;
			left: 400px;
			display: none;

		}

		.one:hover .oneTop {
			display: block;
		}

		.one:hover .oneBottom {
			display: block;
		}

		.two:hover .twoTop {
			display: block;
		}

		.two:hover .twoBottom {
			display: block;
		}

		.three:hover .threeTop {
			display: block;
		}

		.three:hover .threeBottom {
			display: block;
		}

		.four:hover .fourTop {
			display: block;
		}

		.four:hover .fourBottom {
			display: block;
		}

		.five:hover .fiveTop {
			display: block;
		}

		.five:hover .fiveBottom {
			display: block;
		}

		h2 {
			color: #8F7547;
			text-align: center;
		}

		p {
			color: #585B5C;
		}
	</style>
</head>

<body>
	<div class="box">
		<!-- <h1>${res.hero.name}——${res.hero.title}简介：</h1>
		<img class="main" src="${res.skins[0].centerImg}">
		<div class="bottom">
			<span>技能描述</span>
			<div class="one">
				<div class="oneTop">
					<h2></h2>
					<hr color="#8F7547">
					<p></p>
				</div>
				<div class="oneBottom">
					<h2></h2>
					<hr color="#8F7547">
					<p></p>
				</div>
				<img class="oneImg" src=${res.spells[0].abilityIconPath}>
			</div>
			<div class="two">
				<div class="twoTop">
					<h2></h2>
					<hr color="#8F7547">
					<p></p>
				</div>
				<div class="twoBottom"></div>
				<img src=${res.spells[1].abilityIconPath}>
			</div>
			<div class="three">
				<div class="threeTop">
					<h2></h2>
					<hr color="#8F7547">
					<p></p>
				</div>
				<div class="threeBottom"></div>
				<img src=${res.spells[2].abilityIconPath}>
			</div>
			<div class="four">
				<div class="fourTop">
					<h2></h2>
					<hr color="#8F7547">
					<p></p>
				</div>
				<div class="fourBottom"></div>
				<img src=${res.spells[3].abilityIconPath}>
			</div>
			<div class="five">
				<div class="fiveTop">
					<h2></h2>
					<hr color="#8F7547">
					<p></p>
				</div>
				<div class="fiveBottom"></div>
				<img src=${res.spells[4].abilityIconPath}>
			</div>
		</div> -->
	</div>

	<script type="text/javascript">
		let res = JSON.parse(localStorage.getItem('res'))
		let box = document.querySelector('.box')
		console.log(res)
		box.innerHTML = `
		<h1>${res.hero.name}——${res.hero.title}简介：</h1>
		<img class="main" src="${res.skins[0].centerImg}">
		<div class="bottom">
			<span>技能描述</span>
			<div class="one">
				<div class="oneTop">
					<h2>${res.spells[0].name}</h2>
					<hr color="#8F7547">
					<p>${res.spells[0].description}</p>
				</div>
				<div class="oneBottom">
				</div>
				<img class="oneImg" src=${res.spells[0].abilityIconPath}>
			</div>
			<div class="two">
				<div class="twoTop">
					<h2>${res.spells[1].name}</h2>
					<hr color="#8F7547">
					<p>${res.spells[1].description}</p>
				</div>
				<div class="twoBottom"></div>
				<img src=${res.spells[1].abilityIconPath}>
			</div>
			<div class="three">
				<div class="threeTop">
					<h2>${res.spells[2].name}</h2>
					<hr color="#8F7547">
					<p>${res.spells[2].description}</p>
				</div>
				<div class="threeBottom"></div>
				<img src=${res.spells[2].abilityIconPath}>
			</div>
			<div class="four">
				<div class="fourTop">
					<h2>${res.spells[3].name}</h2>
					<hr color="#8F7547">
					<p>${res.spells[3].description}</p>
				</div>
				<div class="fourBottom"></div>
				<img src=${res.spells[3].abilityIconPath}>
			</div>
			<div class="five">
				<div class="fiveTop">
					<h2>${res.spells[4].name}</h2>
					<hr color="#8F7547">
					<p>${res.spells[4].description}</p>
				</div>
				<div class="fiveBottom"></div>
				<img src=${res.spells[4].abilityIconPath}>
			</div>
		</div>
		`
	</script>
</body>

</html>